import { List, SwipeAction } from "antd-mobile";
import { AddCircleOutline } from "antd-mobile-icons";
import { useState } from "react";
import AddressForm from "./AddressForm";

export interface Address {
  id: number;
  name: string;
  phone: string;
  address: string;
  addressCode: string[];
  detailAdd: string;
  isDefault?: boolean;
}
export default function AddressList() {
  const [addresses, setAddresses] = useState<Address[] | []>([
    {
      id: 1,
      name: "张三",
      phone: "13833148108",
      address: "河北省石家庄市栾城区",
      addressCode: ["130000", "130100", "130111"],
      detailAdd: "窦妪镇南赵村",
      isDefault: true,
    },
  ]);

  const [editing, setEditing] = useState<Address | null>(null);
  const [showForm, setShowForm] = useState(false);

  const handleSave = (address: Address) => {
    console.log("address", address);

    if (address.id) {
      setAddresses(
        addresses.map((item) => (item.id === address.id ? address : item))
      );
    } else {
      const newAddress = {
        ...address,
        id: addresses.length + 1,
      };
      setAddresses([...addresses, newAddress]);
    }

    setShowForm(false);
  };
  const handleCancel = () => {
    setShowForm(false);
  };
  const handleDelete = (id: number) => {
    setAddresses(addresses.filter((item) => item.id !== id));
  };
  return (
    <div className="p-4">
      {addresses.length === 0 ? (
        <div className="text-center py-8 text-gray-500 ">
          <p>📭 暂无地址</p>
        </div>
      ) : (
        <List header="收货地址管理">
          {addresses.map((item) => (
            <SwipeAction
              key={item.id}
              rightActions={[
                {
                  key: "edit",
                  text: "编辑",
                  color: "primary",
                  onClick: () => {
                    setEditing(item);
                    setShowForm(true);
                  },
                },
                {
                  key: "delete",
                  text: "删除",
                  color: "danger",
                  onClick: () => handleDelete(item.id),
                },
              ]}
            >
              <List.Item
                description={item.address + item.detailAdd}
                extra={
                  item.isDefault ? (
                    <span className="text-green-600 text-xs">默认</span>
                  ) : (
                    <span className="text-blue-500 text-xs" onClick={() => {}}>
                      设为默认
                    </span>
                  )
                }
              >
                {item.name}-{item.phone}
              </List.Item>
            </SwipeAction>
          ))}
        </List>
      )}
      <div
        className="flex items-center justify-center mt-6 text-blue-500"
        onClick={() => {
          setEditing(null);
          setShowForm(true);
        }}
      >
        <AddCircleOutline className="mr-1" />
        新增地址
      </div>
      {showForm && (
        <AddressForm
          data={editing}
          onSave={handleSave}
          onCancel={handleCancel}
        ></AddressForm>
      )}
    </div>
  );
}
